{if $imageList}
	{literal}
		<link type="text/css" rel="stylesheet" href="fileadmin/templates/css/tn3/tn3.css"></link>
		<script type="text/javascript" src="fileadmin/templates/js/jquery.tn3lite.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				var tn1 = $('.mygallery').tn3({
					skinDir:"fileadmin/templates/css",
					imageClick:"fullscreen",
					image:{
						maxZoom:1.5,
						crop:true,
						clickEvent:"dblclick",
						transitions:[{
							type:"blinds"
						},{
							type:"grid"
						},{
							type:"grid",
							duration:460,
							easing:"easeInQuad",
							gridX:1,
							gridY:8,
							// flat, diagonal, circle, random
							sort:"random",
							sortReverse:false,
							diagonalStart:"bl",
							// fade, scale
							method:"scale",
							partDuration:360,
							partEasing:"easeOutSine",
							partDirection:"left"
						}]
					}
				});
			});
		</script>
	{/literal}

	<div class="mygallery">
		<div class="tn3 album">
			<ol>
				{foreach from=$imageList item='image'}
					<li>
						<h4>{$image.title}</h4>
						{if $image.description}<div class="tn3 description">{$image.description}</div>{/if}
						<a href="{$image.relativePath}">
							<img src="{$image.relativePath}" />
						</a>
					</li>
				{/foreach}
			</ol>
		</div>
	</div>
{/if}